<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="./fonts//demo.css"> -->
  <link rel="stylesheet" href="/admin/fonts/iconfont.css">
  <link rel="stylesheet" href="/admin/lib/layui/css/layui.css" />
  <style>
    .space_slide {
      margin: 10px 20px 30px 20px;
    }

    #updateAbout {
      width: 800px;
      display: none;
    }
  </style>
</head>

<body>
  <div class="layui-card space_slide">
    <div class="layui-card-header">
      <span class="layui-breadcrumb">
        <a href="https://5aebf8b605931.t73.qifeiye.com/">首页</a>
        <a href="">网站管理</a>
        <a><cite>关于我们</cite></a>
      </span>
    </div>
    <div class="layui-card-body">
      <form class="layui-form" action="">
        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">公司简介</label>
          <div class="layui-input-block" style="height: auto;">
            <p style="padding-top: 7px;width: 92%;">
              <%-category.briefIntroduction%>
            </p>
          </div>
        </div>
        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">关于我们</label>
          <div class="layui-input-block">
            <p style="padding-top: 7px;width: 92%;">
              <%=category.aboutUs%>
            </p>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">资格认证</label>
          <div class="layui-input-block" style="width: 250px;">
            <p style="padding-top: 7px;width: 92%;">
              <%=data.cname%>
            </p>
            <img src="<%=data.cimg%>" style="width: 200px; height: 200px; margin-top: 10px;" />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">咨询电话</label>
          <div class="layui-input-block">
            <p style="padding-top: 7px;width: 92%;">
              <%=category.consultationTelephone%>
            </p>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">商务合作</label>
          <div class="layui-input-block">
            <p style="padding-top: 7px;width: 92%;">
              <%=category.businessCooperation%>
            </p>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">联系我们</label>
          <div class="layui-input-block">
            <p style="padding-top: 7px;width: 92%;">
              <%=category.contactUs%>
            </p>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">微信公众号</label>
          <div class="layui-input-block">
            <p style="padding-top: 7px;width: 92%;">
              <%=category.wechatOfficialAccount%>
            </p>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">关注我们</label>
          <div class="layui-input-block">
            <img src="<%=category.followUs%>" style="width: 200px; height: 200px; margin-top: 10px;" />
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button type="button" onclick="updateAbouts()" class="layui-btn">编辑</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <div id="updateAbout">
    <div class="layui-card-body">
      <form class="layui-form" action="">
        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">公司简介</label>
          <div class="layui-input-block">
            <textarea id="richText" name="briefIntroduction" class="layui-textarea" style="width: 92%; resize: none;"></textarea>
          </div>
        </div>
        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">关于我们</label>
          <div class="layui-input-block">
            <textarea name="aboutUs" class="layui-textarea" style="width: 92%; resize: none;"></textarea>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">资格认证</label>
          <div class="layui-input-block" style="width: 230px;">
            <input type="text" name="qualification" required placeholder="请输入资格认证名称" lay-verify="required"
              autocomplete="off" class="layui-input">
          </div>
          <label class="layui-form-label"></label>
          <div class="layui-input-block" style="width: 30%; margin-top: 10px;">
            <blockquote class="layui-elem-quote layui-quote-nm">
              预览图
              <div>
                <img src="" class="quathumb" width="100" alt="">
                <!-- 新图地址 -->
                <input type="hidden" name="qua_img" class="newquathumb">
                <!-- 旧图地址 -->
                <input type="hidden" name="oldqua_img" class="oldquathumb">
              </div>
            </blockquote>
          </div>
          <button type="button" class="layui-btn" id="qualifications" style="margin-left: 110px; margin-top:15px;">
            <i class="layui-icon">&#xe67c;</i>上传相关资格认证图片
          </button>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">咨询电话</label>
          <div class="layui-input-block">
            <input type="text" name="consultationTelephone" required lay-verify="required" autocomplete="off"
              class="layui-input" style="width: 92%;">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">商务合作</label>
          <div class="layui-input-block">
            <input type="text" name="businessCooperation" required lay-verify="required" autocomplete="off"
              class="layui-input" style="width: 92%;">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">联系我们</label>
          <div class="layui-input-block">
            <input type="text" name="contactUs" required lay-verify="required" autocomplete="off" class="layui-input"
              style="width: 92%;">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">微信公众号</label>
          <div class="layui-input-block">
            <input type="text" name="wechatOfficialAccount" required lay-verify="required" autocomplete="off"
              class="layui-input" style="width: 92%;">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">关注我们</label>
          <div class="layui-input-block">
            <button type="button" class="layui-btn" id="QRcode">
              <i class="layui-icon">&#xe67c;</i>上传最新二维码
            </button>
            <!-- <img src="/admin/images/back.jpg" style="width: 200px; height: 200px; margin-top: 10px;" /> -->
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label"></label>
          <div class="layui-input-block" style="width: 30%">
            <blockquote class="layui-elem-quote layui-quote-nm">
              预览图
              <div>
                <img src="" class="thumb" width="100" alt="">
                <!-- 新图地址 -->
                <input type="hidden" name="followUs_img" class="newthumb">
                <!-- 旧图地址 -->
                <input type="hidden" name="oldfollowUs_img" class="oldthumb">
              </div>
            </blockquote>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateForm">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>

</html>
<script src="/admin/lib/layui/layui.js"></script>

<script>
  //注意：导航 依赖 element 模块，否则无法进行功能性操作
  //JS
  var $ = layui.$,
    form;

  function updateAbouts() {
    $.get("/admin/web/updateAbout", (res) => {
      var index = layer.open({
        type: 1,
        title: '修改信息',
        content: $('#updateAbout')
      });

      let data = res.data;
      let category = res.category;
      $("[name=briefIntroduction]").val(category.briefIntroduction);
      $("[name=aboutUs]").val(category.aboutUs);
      $("[name=consultationTelephone]").val(category.consultationTelephone);
      $("[name=businessCooperation]").val(category.businessCooperation);
      $("[name=contactUs]").val(category.contactUs);
      $("[name=wechatOfficialAccount]").val(category.wechatOfficialAccount);
      $(".thumb").attr("src", category.followUs);
      $(".oldthumb").val(category.followUs);

      $("[name=qualification]").val(data.cname);
      $(".quathumb").attr("src", data.cimg);
      $(".oldquathumb").val(data.cimg);

      // 数据提交
      form.on("submit(updateForm)", (data) => {
        $.ajax({
          type: "POST",
          url: "/admin/web/updateAbout",
          data: data.field,
          dataType: "json",
          success: (res) => {
            // console.log(res);
            if (res.code == 1) {
              // tableIns.reload();
              layer.close(index);
            }
            layer.msg(res.msg);
          }
        })
        // return false;
      })
    })
  }

  layui.use(['element', 'layer', 'util', 'form', 'upload'], function () {
    var {
      element,
      layer,
      util,
      upload
    } = layui;
    $ = layui.$, form = layui.form;

    //头部事件
    util.event('lay-header-event', {
      //左侧菜单事件
      menuLeft: function (othis) {
        layer.msg('展开左侧菜单的操作', {
          icon: 0
        });
      },
      menuRight: function () {
        layer.open({
          type: 1,
          content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
          area: ['260px', '100%'],
          offset: 'rt', //右上角
          anim: 5,
          shadeClose: true,
        });
      },
    });

    // 图片上传
    upload.render({
      elem: "#QRcode",
      url: "/admin/web/upload",
      done: (res) => {
        if (res.code == 1) {
          $(".thumb").attr("src", res.url);
          $(".newthumb").val(res.url);
        } else {
          layer.msg("图片上传失败")
        }
      }
    })

    // 图片上传
    upload.render({
      elem: "#qualifications",
      url: "/admin/web/upload",
      done: (res) => {
        if (res.code == 1) {
          $(".quathumb").attr("src", res.url);
          $(".newquathumb").val(res.url);
        } else {
          layer.msg("图片上传失败")
        }
      }
    })
  });
</script>
<script>
  window.onload = function () {
    layui.use(['layedit'], function () {
      var layedit = layui.layedit;

      // 富文本编辑器
      var layeditIns = layedit.build('richText', {
        height: 180, //设置编辑器高度
      });
    })
  }
</script>